<template>
  <div>
    <nav-header :headerTitle="show.title" :navBgColor="'#fff'"></nav-header>
    <section class="page">
      <div class="p-items" v-for="(items,index) in show.list" :key="index" @click="pshow(items)">
        <div class="p-content">
          <span>{{items.title}}</span>
          <img v-show="!items.pshow" src="@/assets/images/tx_down.png" alt />
          <img v-show="items.pshow" src="@/assets/images/tx_up.png" alt />
        </div>
        <div class="p-show" v-show="items.pshow" v-html="items.content"></div>
        <div class="line" v-show="!items.pshow"></div>
      </div>
    </section>
    <div class="null100"></div>
  </div>
</template>

<script>
import navHeader from "@/components/NavHeader";
import mixin from "@/utils/mixin";
export default {
  name: "presentation",
  mixins: [mixin],
  components: {
    navHeader
  },
  data() {
    return {
      show: {
        title : this.$route.query.title,
        list: [],
        cash: [
          {
            pshow: false,
            title: "1、提现到账时间。",
            content:
              "发起提现后，会在两个工作日内到账，如遇周末和节假日，依次顺延。"
          },
          {
            pshow: false,
            title: "2、提现失败怎么办？",
            content:
              "因账号填写错误或者网络服务异常等原因，导致提现失败的，会全额退回，您可以重新提现。"
          },
          {
            pshow: false,
            title: "3、如何更改支付宝账号？",
            content:
              "可在提现时，重新填写新的账号，就可以更改支付宝账号，请注意，账号实名认证信息与填写的姓名应该保持一致，否则将会导致提现失败，提现失败后金额会退回到你的账户。"
          },
          {
            pshow: false,
            title: "4、提现时微信绑定失败怎么办？",
            content:
              "发起提现时，微信绑定失败，可能是网络不稳定导致授权失败，请更换网络或者稍后重试。"
          },
          {
            pshow: false,
            title: "5、提现未到账，平台却显示已到账？",
            content:
              "出现这个问题，可能是您有多个支付宝账号，请核实其他账号是否收到。如果没有，请联系微信客服查询。"
          }
        ],
        task: [
          {
            pshow: false,
            title: "1、怎么接任务？",
            content: "认证成为流量主之后，可以在任务广场，点击接任务领取任务。"
          },
          {
            pshow: false,
            title: "2、怎么完成任务？",
            content: "接任务之后，需要在15分钟内按照要求转发广告，并上传截图等待审核，审核通过即可获得奖励。截图不符合要求会导致审核失败，您可在5分钟内重新上传截图审核，超时或者再次审核失败，将导致任务失败。"
          },
          {
            pshow: false,
            title: "3、为什么任务会失败？",
            content:
              "领取任务后，未在规定时间内完成任务，或多次上传的截图不符合规范，都会导致任务失败。请先认真查看任务要求和教程。"
          },
          {
            pshow: false,
            title: "4、任务失败怎么办？",
            content:
              "任务失败，该任务将会关闭，您可以在广场继续接受/完成其他广告主的任务。"
          },
          {
            pshow: false,
            title: "5、任务奖励怎么算？",
            content:
              "上传的任务截图审核成功，即可获得奖励。其中，图文广告可以获得1.2元，文章广告可以获得0.8元。"
          },
          {
            pshow: false,
            title: "6、每天可以完成多少次任务？",
            content:
              "为保证广告主权益，每位流量主每天最多成功完成10次任务。完成10次后无法再领取任务。"
          },
          {
            pshow: false,
            title: "7、广场页面不同状态任务的含义？",
            content:
              "在任务广场接任务的时候，您可能会看到任务有多个状态，他们的含义如下：<br />接任务：表示该任务可以领取，完成可获得奖励;<br />已结束：表示该任务已经被接完了或者已经失败，该任务不能再接了;<br />继续任务：表示您已经领取了任务，还没有上传截图，请尽快上传截图;<br />查看任务：表示你已接了该任务且上传了截图，正在等待审核中;<br />没有显示：表示你已完成该任务，且已经领取了奖励。"
          }
        ]
      }
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init: function() {
      if (this.show.title == "提现问题") {
        this.show.list = [].concat(this.show.cash);
      } else if (this.show.title == "任务问题") {
        this.show.list = [].concat(this.show.task);
      }
    },
    pshow: function(items) {
      if (items.pshow) {
        items.pshow = false;
      } else {
        items.pshow = true;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.null100 {
  width: 100%;
  height: 100px;
}
.page {
  margin-top: 86px;

  .p-items {
    padding-left: 32px;
    padding-right: 32px;
    .p-content {
      width: 100%;
      height: 128px;
      line-height: 128px;
      position: relative;
      span {
        font-size: 34px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(48, 49, 51, 1);
        position: absolute;
        left: 0px;
      }
      img {
        width: 24px;
        height: 24px;
        position: absolute;
        right: 0px;
        top: 50%;
        margin-top: -12px;
      }
    }
    .line {
      width: 100%;
      height: 2px;
      background: rgba(237, 237, 237, 1);
    }
    .p-show {
      padding: 32px;
      line-height: 56px;
      text-align: left;
      background: rgba(248, 249, 251, 1);
      border-radius: 10px;
      font-size: 30px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(129, 129, 129, 1);
    }
  }
}
</style>
